// src/pages/shizhiran/gender.tsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './gender.css';

const Gender: React.FC = () => {
  const [selectedGender, setSelectedGender] = useState<string | null>(null);
  const [isNextEnabled, setIsNextEnabled] = useState<boolean>(false);
  const navigate = useNavigate();

  const handleGenderSelect = (gender: string) => {
    setSelectedGender(gender);
    setIsNextEnabled(true);
  };

  const handleNext = () => {
    if (selectedGender) {
      console.log('Selected gender:', selectedGender);
      // 跳转到目标选择页
      window.location.href = '/goal'; // 示例跳转逻辑
    }
  };

  const handleBack = () => {
    navigate('/guide');
  };

  const handleSkip = () => {
    navigate('/goal');
  };

  return (
    <div className="container">
      <div style={{display: 'flex', justifyContent: 'space-between',alignItems: 'center',padding:'16px 0'}}>
        <button className="back-button" onClick={handleBack}>
          ←
        </button>
        <div className="progress-bar">
          <div className="progress" style={{ width: '0%' }}></div>
        </div>
        <button style={{fontSize:'14px',color:'#666',background:'none',border:'none'}} onClick={handleSkip}>跳过</button>
      </div>

      <div className="title">选择性别</div>

      <div className="gender-options">
        <div 
          className={`gender-option ${selectedGender === 'female' ? 'selected' : ''}`}
          onClick={() => handleGenderSelect('female')}
        >
          <div className="icon female-icon">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <path fill="#f47c4a" d="M12 2c-1.1 0-2 .9-2 2 0 .74.4 1.39 1 1.73V8h-3c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1V11h3c.55 0 1-.45 1-1s-.45-1-1-1h-3V6.73c.6-.34 1-.99 1-1.73 0-1.1-.9-2-2-2z"/>
              <circle cx="12" cy="16" r="5" fill="none" stroke="#f47c4a" strokeWidth="2"/>
            </svg>
          </div>
          <span className="label">女士</span>
        </div>

        <div 
          className={`gender-option ${selectedGender === 'male' ? 'selected' : ''}`}
          onClick={() => handleGenderSelect('male')}
        >
          <div className="icon male-icon">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <circle cx="12" cy="9" r="3" fill="#f47c4a"/>
              <path fill="#f47c4a" d="M12 14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 4c0 3.31 2.69 6 6 6s6-2.69 6-6v-2h-2v2c0 2.21-1.79 4-4 4s-4-1.79-4-4V8h8V6H6v12z"/>
            </svg>
          </div>
          <span className="label">男士</span>
        </div>
      </div>

      <button 
        className={`next-button1 ${isNextEnabled ? 'enabled' : 'disabled'}`}
        onClick={handleNext}
        disabled={!isNextEnabled} 
      >
        下一步
      </button>
    </div>
  );
};

export default Gender;